svelte-eslint-parser

svelte-eslint-parser

Svelte parser for ESLint.

Live DEMO • Discord

Motivation

The svelte-eslint-parser aims to make it easy to create your own ESLint rules for Svelte.

eslint-plugin-svelte is an ESLint plugin built upon this parser, and it already implements some rules.

ESLint Plugins Using svelte-eslint-parser

eslint-plugin-svelte

ESLint plugin for Svelte.
Provides a variety of template-based checks using the Svelte AST.

@intlify/eslint-plugin-svelte

ESLint plugin for internationalization (i18n) in Svelte applications, offering helpful i18n-related rules.

---

Installation

npm install --save-dev eslint svelte-eslint-parser

---

Usage

ESLint Config (eslint.config.js)

import js from "@eslint/js";
import svelteParser from "svelte-eslint-parser";

export default [
  js.configs.recommended,
  {
    files: [
      "**/*.svelte",
      "*.svelte",
      // Need to specify the file extension for Svelte 5 with rune symbols
      "**/*.svelte.js",
      "*.svelte.js",
      "**/*.svelte.ts",
      "*.svelte.ts",
    ],
    languageOptions: {
      parser: svelteParser,
    },
  },
];

CLI

eslint "src/**/*.{js,svelte}"

---

Options

The parserOptions for this parser generally match what espree—ESLint's default parser—supports.

For example:

import svelteParser from "svelte-eslint-parser";

export default [
  // ...
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        sourceType: "module",
        ecmaVersion: 2021,
        ecmaFeatures: {
          globalReturn: false,
          impliedStrict: false,
          jsx: false,
        },
      },
    },
  },
];

parserOptions.parser

Use the parserOptions.parser property to define a custom parser for <script> tags. Any additional parser options (besides the parser itself) are passed along to the specified parser.

import tsParser from "@typescript-eslint/parser";

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: tsParser,
      },
    },
  },
];

Using TypeScript in <script>

If you use @typescript-eslint/parser for TypeScript within <script> of .svelte files, additional configuration is needed. For example:

import tsParser from "@typescript-eslint/parser";

export default [
  // Other config for non-Svelte files
  {
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: "path/to/your/tsconfig.json",
        extraFileExtensions: [".svelte"],
      },
    },
  },
  // Svelte config
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
      parserOptions: {
        parser: tsParser,
      },
    },
  },
];

Multiple parsers

To switch parsers for each language, provide an object:

import tsParser from "@typescript-eslint/parser";
import espree from "espree";

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: {
          ts: tsParser,
          js: espree,
          typescript: tsParser,
        },
      },
    },
  },
];

parserOptions.svelteConfig

If you use eslint.config.js, you can specify a svelte.config.js file via parserOptions.svelteConfig.

import svelteConfig from "./svelte.config.js";

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        svelteConfig,
      },
    },
  },
];

If parserOptions.svelteConfig is not set, the parser attempts to statically read some config from svelte.config.js.

parserOptions.svelteFeatures

You can configure how Svelte-specific features are parsed via parserOptions.svelteFeatures.

For example:

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        svelteFeatures: {
          // This is for Svelte 5. The default is true.
          // If false, ESLint won't recognize rune symbols.
          // If not specified, the parser tries to read compilerOptions.runes from `svelte.config.js`.
          // If `parserOptions.svelteConfig` is not given and static analysis fails, it defaults to true.
          runes: true,
        },
      },
    },
  },
];

---

Editor Integrations

Visual Studio Code

Use the dbaeumer.vscode-eslint extension provided by Microsoft.

By default, it only targets *.js and *.jsx, so you need to configure .svelte file support. For example, in .vscode/settings.json:

{
  "eslint.validate": ["javascript", "javascriptreact", "svelte"]
}

---

Usage for Custom Rules / Plugins

• See AST.md for the AST specification. You can explore it on the Live DEMO.
• This parser generates its own ScopeManager. Check the Live DEMO.
• Several rules are [already implemented] in [eslint-plugin-svelte], and their source code can be a helpful reference.

---

Contributing

Contributions are welcome! Please open an issue or submit a PR on GitHub.
For internal details, see internal-mechanism.md.

---

License

See LICENSE (MIT) for rights and limitations.

Changelog

1.0.0-next.13

Minor Changes

• #645 6ff7516 Thanks @ota-meshi! - feat: improve scoping of snippet declarations acting as slot properties

Patch Changes

• #650 bc75922 Thanks @baseballyama! - fix: add parent node to SvelteFunctionBindingsExpression